/*
  学习目标：useEffect使用第二个参数，模拟生命周期
  第二个参数作用：如果传递了第二个参数，也就依赖项， [ 依赖项1，依赖项2 ...]
  那么在依赖项改变时，才会触发 useEffect，类似 vue - watch
    需求1： 模拟挂载时
    需求2： 模拟更新时

*/
import React, { useState, useEffect } from 'react';

export default function App() {
  const [count, setCount] = useState(100);
  const [msg, setMsg] = useState('hello react');

  // 1. ❌不推荐，不传递第二个参数
  // 特点： 页面所有的状态改变了，都会引起我的更新
  // 缺点：性能浪费
  // useEffect(() => {
  //   console.log('页面的状态改变，我都会被触发');
  // });

  // 2. ✅传递空数组，代表没有依赖项，那么页面状态改变了都与我无关，等同于 componentDidMount
  // 场景：发送请求，获取dom，绑定事件等等
  useEffect(() => {
    // 状态改变时的业务代码
    console.log('页面的状态改变与我无关，我只在渲染完成时触发');
  }, []);

  // 3. [count],传递依赖项，依赖变化时 都会触发，等同于 挂载 和 更新的 二合一
  // 作用：挂载 和 更新的 二合一
  // 特点：依赖变化时，才会触发 useEffect，等同于 vue 中的watch，开启了immediately
  // 场景：数据本地存储
  useEffect(() => {
    // 状态改变时的业务代码
    console.log('count的状态改变，我都会被触发');
  }, [count]);

  return (
    <div>
      count - {count} msg - {msg}
      <button onClick={() => setCount(count + 1)}>点我修改count</button>
      <button onClick={() => setMsg(msg + '~')}>点我修改msg</button>
    </div>
  );
}
